<template>
  <el-form class="VerificationForm" ref="formRef" :model="formData" :rules="formRules" label-position="top" size="large"
    @keyup.enter="goNext">
    <el-form-item prop="phone" label="手机号">
      <el-input v-model.trim="formData.phone" maxlength="11" placeholder="请输入手机号" type="text" />
    </el-form-item>

    <el-form-item prop="verifyCode" label="验证码">
      <el-input v-model.trim="formData.verifyCode" placeholder="请输入验证码" type="text" style="width: 346px" />
      <el-button class="veri-btn" type="primary" size="large" @click="postCodeFun" :loading="timeNum !== tolNum">
        {{ timeNum === tolNum ? '点击验证' : timeNum }}
      </el-button>
      <div class="code-tip" v-if="showCodeTip">验证码已发送,10分钟内有效</div>
    </el-form-item>
    <div class="bottom-box">
      <el-button class="lg-btn" size="large" type="primary" @click.prevent="goNext">
        下一步
      </el-button>
    </div>
  </el-form>
</template>
<script lang="ts" setup>
import { reactive, ref, unref, computed, toRef, toRefs, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import { useForgetStore } from '../store';
import { postCode, postPhoneCode } from '@/api/user';
import { useRoute } from 'vue-router';
import { valTime } from '../useEditPass';
const forgetStore = useForgetStore();
const route = useRoute();

const formRef = ref();
const stateData = reactive({
  redirect: '',
  formData: {
    phone: '',
    verifyCode: ''
  },
  formRules: {
    phone: [
      {
        required: true,
        message: "手机号码非法",
        trigger: "blur",
        pattern: /^1\d{10}$/,
      },
    ],
  },
  loading: false,
  showCodeTip: false
});

const { formData, formRules, loading, showCodeTip } = toRefs(stateData);

const { setTime, timeNum, tolNum } = valTime();

async function postCodeFun(params: any) {
  formRef.value.validate((valid: boolean) => {
    if (valid) {
      stateData.loading = true;
      // 发送验证码
      setTime();
      stateData.showCodeTip = true;
      postCode(stateData.formData)
        .then(res => {
          ElMessage.success('发送成功');

          stateData.loading = false;
        })
        .catch(() => {
          stateData.loading = false;
        });
    } else {
      return false;
    }
  });
}

async function goNext() {
  // 验证手机号
  formRef.value.validate((valid: boolean) => {
    if (valid) {
      if (formData.value.verifyCode === '') {
        return ElMessage.warning('请输出验证码');
      }
      stateData.loading = true;
      postPhoneCode(stateData.formData)
        .then(res => {
          console.log(res);
          forgetStore.setSign(res.data.sign);
          forgetStore.setPhone(stateData.formData.phone);
          forgetStore.setTabState(1);
          stateData.loading = false;
        })
        .catch(() => {
          stateData.loading = false;
        });
    } else {
      return false;
    }
  });
}


onMounted(() => {
  if (route.query.phone) {
    stateData.formData.phone = route.query.phone as string;
  }
});
</script>
<style lang="scss" scoped>
@import '@/styles/index';

.VerificationForm {
  .code-tip {
    color: #00B69B;
    font-size: 14px;
  }

  .bottom-box {
    margin-top: 100px;
  }

  .veri-btn {
    width: 114px;
    margin-left: 16px;
  }

  .input-label-top {
    color: #202224;
    font-size: 18px;
    font-family: 'OPPOSans';
    font-weight: bold;
    line-height: 36px;
  }
}
</style>
